<template>
  <view class="equipment_detail_box">
    <view class="detail_header flex justify-between">
      <view>
        <view class="detail_title"> 设备名称 </view>
        <view class="detail_value"> {{ name }} </view>
      </view>
      <image
        :src="imageUrl"
        mode=""
        style="width: 120upx; height: 120upx"
      ></image>
    </view>
    <view class="flex flex-wrap">
      <view
        class="detail_value_item"
        v-for="(item, index) in detailArr"
        :key="index"
      >
        <view class="detail_title"> {{ item.label }} </view>
        <view class="detail_value" :style="{ color: item.color }">
          {{ item.value }}
        </view>
      </view>
    </view>
    <view class="detail_header">
      <view class="detail_title"> 图片 </view>
      <view class="detail_value">
        <u-album :urls="listImage"></u-album>
      </view>
    </view>
    <!-- <view
      class="footer_bottom flex align-center"
      v-if="query.showOperation != 1"
    >
      <button
        class="cu-btn round two_button"
        style="background: #f7d047"
        @click="
          jump(
            `/pages/reportForRepair/index?id=${query.id}&repairType=2&title=报修`
          )
        "
      >
        报 修
      </button>
      <button
        class="cu-btn two_button round"
        @click="
          jump(
            `/pages/reportForRepair/index?id=${query.id}&repairType=4&title=出借`
          )
        "
        style="background: #f87847"
      >
        出 借
      </button>
    </view> -->
  </view>
</template>
      
  <script>
import { getDetail, getDetailTwo } from "@/api/system/equipmentDetail.js";
import { mapState } from "vuex";
export default {
  data() {
    return {
      query: {},
      name: "",
      imageUrl: "",
      detailArr: [],
      listImage: [],
      // statusArr: [
      //   { id: 101, label: "待保养" },
      //   { id: 102, label: "已保养" },
      //   { id: 103, label: "保养到期" },
      //   { id: 201, label: "待维修" },
      //   { id: 202, label: "已维修" },
      //   { id: 301, label: "已借出" },
      //   { id: 302, label: "已归还" },
      //   { id: 0, label: "正常" },
      // ],
    };
  },
  onLoad: function (option) {
    this.query = option || {};
  },
  onShow() {
    this.getDetailFn();
  },
  computed: {
    ...mapState("user", ["statusArr"]),
  },
  methods: {
    jump(str) {
      let url;
      let { type, title } = this.query;
      if (title) {
        url = str + `?type=${type}&title=${title}`;
      } else {
        url = str;
      }
      this.$tab.navigateTo(url);
    },
    async getDetailFn() {
      let res = {};
      if (
        this.query.showOperation &&
        this.query.repairType != 4 &&
        this.query.repairType != 2
      ) {
        res = await getDetailTwo({ id: this.query.id });
      } else {
        res = await getDetail({ id: this.query.id });
      }
      const {
        name,
        xh,
        imageUrl,
        gysName,
        type,
        status,
        unit,
        deviceCategory,
        warehouse,
        buyDate,
        healthTime,
        giveName,
        processImage,
        processRemark,
        applyRemark,
        applyImage,
        giveRemark,
      } = res.result || {};
      let Remark;
      if (this.query.repairType == 2) {
        Remark = applyRemark;
        this.listImage = applyImage || [];
      } else if (this.query.repairType == 4) {
        Remark = giveRemark;
        this.listImage = applyImage || [];
      } else {
        Remark = processRemark;
        this.listImage = processImage || [];
      }
      this.name = name;
      this.imageUrl = imageUrl;
      this.detailArr = [
        {
          label: "型号",
          value: xh || '-',
        },
        {
          label: "品牌",
          value: gysName || '-',
        },
        {
          label: "类别",
          value: type || '-',
        },
        {
          label: "单位",
          value: unit || '-',
        },
        {
          label: "设备分类",
          value: deviceCategory || '-',
        },
        {
          label: "设备仓库",
          value: warehouse || '-',
        },
        {
          label: "入库日期",
          value: buyDate || '-',
        },
        {
          label: "上次保养日期",
          value: healthTime || '-',
        },
        {
          label: "设备状态",
          value: this.statusArr.find((item) => item.id === status)?.label,
          color: "#4797f9",
        },
        {
          label: "领用人",
          value: giveName || '-',
        },
        {
          label: "描述",
          value: Remark || '-',
        },
      ];
    },
  },
};
</script>
      
<style lang="scss">
page {
  background-color: #ffffff;
}
.equipment_detail_box {
  padding: 30upx 30upx 150upx 30upx;
  .detail_header {
    border-bottom: 1px solid #eee;
    padding: 30upx 0;
  }
  .detail_value_item {
    border-bottom: 1px solid #eee;
    padding: 30upx 0;
    width: 50%;
  }
  .detail_title {
    font-size: 34upx;
    font-weight: 700;
  }
  .detail_value {
    font-size: 30upx;
    margin-top: 30upx;
    color: #a8a8a8;
  }
  .footer_bottom {
    height: 150upx;
    position: fixed;
    border-top: 1px solid #eee;
    bottom: 0;
    right: 0;
    background: #fff;
    left: 0;
    button {
      margin: 0 10upx;
      height: 90upx;
      font-size: 32upx;
      color: #fff;
    }
    .two_button {
      width: 50%;
    }
    .one_button {
      width: 100%;
    }
  }
}
</style>
      